<template>
  <div class="goods-order-details">
    <div class="top">状态：待发货</div>
    <div class="item">
      <img src="@/assets/bolanglang.png" class="bolang" alt="">
      <div class="goods">
        <div class="img">
          <img src="@/assets/gouwuche02.png">
        </div>
        <div class="title">
          <p class="tip">Naef Cublex立方体创意魔创意魔...创意魔...创意魔...创意魔...</p>
          <p class="num">数量:1</p>
        </div>
        <div class="price">¥368</div>
      </div>
      <p class="address">配送地址 : 贝雯琳 13085008500 广东省广州市天河区天河北路 壬丰大厦</p>
    </div>
    <div class="white">
      <div class="goods-all">
        <span class="all-title">支付方式</span>
        <span class="all-price">微信支付</span>
      </div>
      <div class="goods-all">
        <span class="all-title">订单编号</span>
        <span class="all-price">25253580380</span>
      </div>
      <div class="goods-all">
        <span class="all-title">创建时间</span>
        <span class="all-price">2018.11.12 14:00</span>
      </div>
    </div>
    <div class="white">
      <div class="goods-all">
        <span class="all-title">物流公司</span>
        <span class="all-price">圆通快递</span>
      </div>
      <div class="goods-all">
        <span class="all-title">物流单号</span>
        <span class="all-price">4856543206</span>
      </div>
    </div>
    <div class="white">
      <div class="goods-all">
        <span class="all-title">运费</span>
        <span class="all-price red">￥0.00</span>
      </div>
      <div class="goods-all">
        <span class="all-title">价格总计</span>
        <span class="all-price red">￥199.00</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.goods-order-details
  width 100%
  min-height 100vh
  overflow hidden
  background-color #f5f5f5
  .top
    line-height 5rem
    padding-left 1.6rem
    color #333
    background-color #fff
    margin-bottom 1rem
    font-size 1.7rem
    font-weight 500
  .item
    background-color #fff
    position relative
    margin-bottom 1rem
    padding 0 1.5rem
    .bolang
      position absolute
      width 100%
      bottom -.3rem
      left 0
    .goods
      display flex
      background-color #fff
      padding 1.5rem 0
      border-bottom 1px solid #e6e6e6
      .img
        min-width 9.4rem
        max-width 9.4rem
        height 7rem
        margin-right 1rem
      .title
        position relative
        flex 5
        .tip
          font-size 1.5rem
          color #333
          font-weight 500
          width calc(100vw - 17.4rem)
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .num
          color #333
          font-size 1.2rem
          line-height 1.6rem
          position absolute
          top 3rem
      .price
        flex 1
        text-align right
        line-height 2.1rem
        font-size 1.5rem
        font-weight 500
        color #A81E27
    .address
      color #2F2F33
      font-size 1.3rem
      padding 1.7rem 0
      line-height 1.7rem
  .white
    background-color #fff
    .goods-all
      background-color #fff
      line-height 5rem
      height 5rem
      display flex
      font-size 1.5rem
      padding-right 1.5rem
      margin-left 1.5rem
      border-bottom 1px solid #e5e5e5
      &:last-child
        margin-bottom 1rem
        border none
      .all-title
        flex 1
        text-align left
        color #8D8D99
      .all-price
        flex 1
        text-align right
        color #2F2F33
        font-weight 500
        position relative
      .all-price.red
        color #A81E27
</style>
